/* ============================================================
   Contact Us页面样式文件
   作者：Trae Assistant
   日期：2026-07-09
   说明：参考设计图实现Contact Us页面的版心布局、联系信息、表单及响应式设计
   ============================================================ */

/* --------------------------
   版心容器样式
   -------------------------- */
.contact-container {
    width: 90%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.contact-container img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* --------------------------
   Banner区域样式
   -------------------------- */
.contact_banner {
    width: 100%;
    overflow: hidden;
    padding: 0;
}

.contact_banner img {
    width: 100%;
    height: auto;
    display: block;
}

/* --------------------------
   联系内容区域样式
   -------------------------- */
.contact_content {
    padding: 6rem 0;
    background-color: #ffffff;
}

.contact_content .contact-container {
    display: flex;
    gap: 6rem;
}

/* --------------------------
   左侧联系信息样式
   -------------------------- */
.contact_content .contact_info {
    flex: 0 0 45%;
    max-width: 45%;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.contact_content .contact_info-item {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.contact_content .contact_info-item .contact_info-icon {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #f8faf9;
    border: 1px solid #e8e8e8;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.contact_content .contact_info-item .contact_info-icon img {
    width: 24px;
    height: 24px;
}

.contact_content .contact_info-item .contact_info-content {
    flex: 1;
}

.contact_content .contact_info-item .contact_info-content .contact_info-title {
    font-size: 1rem;
    font-weight: 600;
    color: #333333;
    margin: 0 0 0.75rem;
    text-transform: lowercase;
}

.contact_content .contact_info-item .contact_info-content .contact_info-text {
    font-size: 0.875rem;
    color: #666666;
    line-height: 1.6;
    margin: 0;
}

/* --------------------------
   右侧联系表单样式（CMS表单）
   -------------------------- */
.contact_content .contact__form {
    flex: 0 0 55%;
    max-width: 55%;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* CMS表单容器 */
.contact__form .form-horizontal {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.contact__form .form-horizontal > * {
    display: none !important;
}

.contact__form .form-horizontal .fc-form-body {
    display: flex !important;
    flex-wrap: wrap;
    gap: 1.25rem;
    width: 100% !important;
}

.contact__form .form-horizontal .fc-form-body > *,
.contact__form .form-horizontal .fc-form-body > div > * {
    display: block !important;
}

/* 每个字段组：默认两列 */
.contact__form .form-horizontal .fc-form-body .form-group {
    flex: 1;
    min-width: calc(50% - 0.625rem);
    max-width: calc(50% - 0.625rem);
    display: flex !important;
    flex-direction: column;
}

/* 文件上传、文本域、最后一组：占满宽度 */
.contact__form .form-horizontal .fc-form-body .form-group:has(input[type="file"]),
.contact__form .form-horizontal .fc-form-body .form-group:has(textarea),
.contact__form .form-horizontal .fc-form-body .form-group:last-child {
    min-width: 100% !important;
    max-width: 100% !important;
}

/* 隐藏字段标签 */
.contact__form .form-horizontal .fc-form-body .form-group .control-label,
.contact__form .form-horizontal .fc-form-body .form-group > label {
    display: none !important;
}

/* 字段内容区 */
.contact__form .form-horizontal .fc-form-body .form-group .col-md-10 {
    width: 100% !important;
    padding: 0 !important;
}

/* 输入框 */
.contact__form .form-horizontal .fc-form-body .form-group .col-md-10 input {
    width: 100% !important;
    padding: 15px 20px !important;
    background: #f8faf9 !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 8px !important;
    font-size: 0.875rem !important;
    color: #333333 !important;
    outline: none !important;
    font-family: inherit !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
}

.contact__form .form-horizontal .fc-form-body .form-group .col-md-10 input::placeholder {
    color: #999999 !important;
}

.contact__form .form-horizontal .fc-form-body .form-group .col-md-10 input:focus {
    border-color: #008F63 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 2px rgba(0, 143, 99, 0.1) !important;
}

/* 文本域 */
.contact__form .form-horizontal .fc-form-body .form-group .col-md-10 textarea {
    width: 100% !important;
    min-height: 180px !important;
    padding: 15px 20px !important;
    background: #f8faf9 !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 8px !important;
    font-size: 0.875rem !important;
    color: #333333 !important;
    outline: none !important;
    font-family: inherit !important;
    box-sizing: border-box !important;
    resize: vertical !important;
    transition: all 0.3s ease !important;
}

.contact__form .form-horizontal .fc-form-body .form-group .col-md-10 textarea::placeholder {
    color: #999999 !important;
}

.contact__form .form-horizontal .fc-form-body .form-group .col-md-10 textarea:focus {
    border-color: #008F63 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 2px rgba(0, 143, 99, 0.1) !important;
}

/* 下拉框、文件上传 */
.contact__form .form-horizontal .fc-form-body .form-group .col-md-10 select,
.contact__form .form-horizontal .fc-form-body .form-group .col-md-10 input[type="file"] {
    width: 100% !important;
    padding: 15px 20px !important;
    background: #f8faf9 !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 8px !important;
    font-size: 0.875rem !important;
    color: #333333 !important;
    outline: none !important;
    font-family: inherit !important;
    box-sizing: border-box !important;
}

.contact__form .form-horizontal .fc-form-body .form-group .col-md-10 input[type="file"] {
    height: auto !important;
    min-height: 50px;
    padding: 10px !important;
    cursor: pointer;
}

.contact__form .form-horizontal .fc-form-body .form-group .col-md-10 input[type="file"]::file-selector-button {
    padding: 8px 20px;
    background: #008F63;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    margin-right: 15px;
}

.contact__form .form-horizontal .fc-form-body .form-group .col-md-10 input[type="file"]::-webkit-file-upload-button {
    padding: 8px 20px;
    background: #008F63;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    margin-right: 15px;
}

/* 隐藏最后一个字段组的输入框（验证码） */
.contact__form .form-horizontal .fc-form-body .form-group:nth-last-of-type(1) .col-md-10 input {
    display: none !important;
}

/* 验证码按钮 */
.contact__form .form-group:nth-last-of-type(2) button {
    width: calc(20px + 4rem) !important;
    padding: calc(5px + 0.25rem) 0;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    background: #f8faf9;
}

.contact__form .form-group:nth-last-of-type(2) button span {
    color: #666666;
}

.contact__form .form-group:nth-last-of-type(2) button i {
    display: none !important;
}

/* 文件上传列表 */
.contact__form .files-grid-list {
    grid-template-columns: repeat(3, 1fr) !important;
}

/* 帮助文本 */
.contact__form .form-horizontal .fc-form-body .form-group .help-block,
.contact__form .form-horizontal .fc-form-body .form-group .col-md-10 .help-block {
    display: block !important;
    font-size: 0.8rem;
    color: #999999;
    margin-top: 8px;
    line-height: 1.4;
}

.finecms-file-tip,
.finecms-file-ts {
    color: #666666 !important;
    font-size: calc(4px + 0.5rem);
}

/* --------------------------
   发送按钮样式
   -------------------------- */
.contact__form .form-horizontal .portlet-body.form.myfooter {
    display: flex !important;
    justify-content: flex-start;
    padding: 0;
    margin: 0;
}

.contact__form .form-horizontal .form-actions {
    padding: 0;
    margin: 0;
    text-align: left;
    background: transparent;
    border: none;
}

.contact__form .form-horizontal .form-actions > div.more {
    padding: 14px 50px;
    background: #008F63;
    color: #ffffff;
    border: none;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.contact__form .form-horizontal .form-actions > div.more:hover {
    background: #007050;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 143, 99, 0.3);
}

.contact__form .form-horizontal .form-actions > div.more a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
}

/* ============================================================
   响应式设计
   ============================================================ */

/* --------------------------
   中等屏幕（≤1200px）
   -------------------------- */
@media (max-width: 1200px) {
    .contact-container {
        width: 92%;
        padding: 0 0.75rem;
    }

    .contact_content {
        padding: 4rem 0;
    }

    .contact_content .contact-container {
        gap: 4rem;
    }
}

/* --------------------------
   平板屏幕（≤768px）
   -------------------------- */
@media (max-width: 768px) {
    .contact-container {
        width: 95%;
        padding: 0 0.5rem;
    }

    .contact_content {
        padding: 3rem 0;
    }

    .contact_content .contact-container {
        flex-direction: column;
        gap: 3rem;
    }

    .contact_content .contact_info {
        flex: none;
        max-width: 100%;
        gap: 2rem;
    }

    .contact_content .contact__form {
        flex: none;
        max-width: 100%;
    }

    .contact__form .form-horizontal .fc-form-body .form-group {
        min-width: 100% !important;
        max-width: 100% !important;
    }

    .contact__form .form-horizontal .form-actions > div.more {
        padding: 12px 40px;
        font-size: 0.9rem;
    }

    .contact__form .form-horizontal .fc-form-body .form-group .col-md-10 input,
    .contact__form .form-horizontal .fc-form-body .form-group .col-md-10 textarea,
    .contact__form .form-horizontal .fc-form-body .form-group .col-md-10 select,
    .contact__form .form-horizontal .fc-form-body .form-group .col-md-10 input[type="file"] {
        padding: 12px 15px !important;
        font-size: 0.85rem !important;
    }

    .contact__form .form-horizontal .fc-form-body .form-group .col-md-10 textarea {
        min-height: 150px !important;
    }
}

/* --------------------------
   手机屏幕（≤480px）
   -------------------------- */
@media (max-width: 480px) {
    .contact_content .contact_info-item {
        gap: 1rem;
    }

    .contact_content .contact_info-item .contact_info-icon {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
    }

    .contact_content .contact_info-item .contact_info-icon img {
        width: 20px;
        height: 20px;
    }

    .contact_content .contact_info-item .contact_info-content .contact_info-title {
        font-size: 0.9rem;
    }

    .contact_content .contact_info-item .contact_info-content .contact_info-text {
        font-size: 0.8rem;
    }

    .contact__form .form-horizontal .fc-form-body .form-group .col-md-10 input,
    .contact__form .form-horizontal .fc-form-body .form-group .col-md-10 textarea,
    .contact__form .form-horizontal .fc-form-body .form-group .col-md-10 select,
    .contact__form .form-horizontal .fc-form-body .form-group .col-md-10 input[type="file"] {
        padding: 10px 12px !important;
        font-size: 0.8rem !important;
    }

    .contact__form .form-horizontal .fc-form-body .form-group .col-md-10 textarea {
        min-height: 120px !important;
    }

    .contact__form .form-horizontal .form-actions > div.more {
        padding: 10px 30px;
        font-size: 0.85rem;
    }
}

/* --------------------------
   地图区域样式
   -------------------------- */
.contact_content .contact-container {
    flex: none;
    width: 100%;
}

.contact_content .contact__map {
    width: 100%;
    margin-top: 4rem;
}

.contact_content .contact__map .amap_box {
    width: 100%;
    height: 450px;
}

.contact_content .contact__map #amap_container {
    width: 100%;
    height: 100%;
}

/* 隐藏高德地图 logo 和版权 */
.contact__map .amap-logo,
.contact__map .amap-copyright {
    display: none !important;
}

@media (max-width: 768px) {
    .contact_content .contact__map {
        margin-top: 3rem;
    }

    .contact_content .contact__map .amap_box {
        height: 300px;
    }
}

@media (max-width: 480px) {
    .contact_content .contact__map .amap_box {
        height: 250px;
    }
}